<script lang="ts" setup>
import { I18nT } from '@peng_kai/kit/libs/vue-i18n';
import { useStorage } from '@peng_kai/kit/libs/vueuse';

const appStore = useAppStore();
const show = ref(false);
const hiddenFreeCurrencyTip = useStorage('HIDDEN_FREE_CURRENCY_TIP', false);

function open() {
  !hiddenFreeCurrencyTip.value && (show.value = true);
}

function close() {
  show.value = false;
}

defineExpose({
  open,
  close,
});
</script>

<template>
  <AModal v-model:open="show" title="DIAMOND" centered wrapClassName="ant-cover__Modal-drawer [--modal-height:fit-content]" :footer="null" @close="close">
    <div class="text-3.5 leading-normal">
      <div class="grid gap-2.5">
        <p class="leading-normal">
          {{ $t('0kI0QoIEeo5AcOgzGWh8i', { platform: appStore.appName }) }}
        </p>
        <ul class="m-0 max-h-50 list-disc overflow-scroll pb-4 pl-6 text-sys-text-body">
          <I18nT keypath="pLEwBui1Zpk6NnM0wQMft">
            <template #name>
              <span class="text-yellow500">Free Wheel</span>
            </template>
          </I18nT>
          <li>{{ $t('lPg2U2612QpFvxk9WBn2L') }}</li>
          <li>{{ $t('cUt9KuVeo5I2CVkSpj3l') }}</li>
        </ul>
      </div>
    </div>
    <ACheckbox v-model:checked="hiddenFreeCurrencyTip" class="text-3.5">
      {{ $t('fRLkssSjFzNXfmSjS2Q4') }}
    </ACheckbox>
    <AButton class="ant-cover__Button-3d-primary mt-4 w-full" type="primary" @click="close">
      {{ $t('pFexkGv2pL4Nl4GmT9ZZm') }}
    </AButton>
  </AModal>
</template>

<style lang="scss" scoped>
ul > li {
  --uno: 'leading-normal';
}
</style>
